<!-- 我的页面 -->
<template>
  <view v-show="showFlag" class="box">
    <view class="my_top" :style="{marginTop:topHeight.top+'px'}">
      <view class="my_photo">
        <view class="my_phtot_img">
          <image :src="imgMinioPath + '/morentouxiang.png'" alt="" style="width: 80px;height: 80px;border-radius: 40px;"/>
        </view>
      </view>
      <view class="user-info">
        <view class="name" style="text-align: center;font-weight: bold;"> {{ nickName }}</view>
        <view class="note" style="text-align: center;"> <view class="iconfont icon-zhuzhi"></view><view class="address">{{ orgName }}</view></view>
        <view class="note" style="text-align: center;"><view class="iconfont icon-phone"></view> {{ phone }}</view>
      </view>
    </view>
    <view class="my_content" :style="{flex:1}">
      <view class="my_list">
<!--        <view class="my_list_item" @tap="guid()">-->
<!--          <text>使用手册</text>-->
<!--          <uv-icon name="arrow-right" size="22"></uv-icon>-->
<!--        </view>-->
      </view>
      <view class="my_list">
<!--        <view class="my_list_item my_list_item_border" @tap="advice()">-->
<!--          <text>建议与反馈</text>-->
<!--          <uv-icon name="arrow-right" size="22"></uv-icon>-->
<!--        </view>-->
        <view class="my_list_item" @tap="toEditPassword()">
          <text>修改密码</text>
          <uv-icon name="arrow-right" size="22"></uv-icon>
        </view>
      </view>
      <view class="tcdl">
        <button type="primary" style="color: #F53F3F;background-color: #F8E6E9; font-weight: bold;height: 50px;line-height: 50px;" @tap="bindLogout">退出登录</button>
      </view>
    </view>
    <Tabbar></Tabbar>
  </view>

</template>

<script setup>
import {reactive, ref, getCurrentInstance, watchEffect,onMounted} from 'vue';
import api from '@/api/login/login'

let nickName = ref("");
let orgName = ref("");
let orgId = ref("");
let name = ref("");
let phone = ref("");
let showFlag = ref(false);
const userInfo = ref('');
let token =  ref(null);
const {proxy} = getCurrentInstance();
import {onShow} from '@dcloudio/uni-app'
import config from '@/common/config';
let imgMinioPath = ref(config.IMG_MINIO_PATH);
// 获取路由传参
onShow(() => {
  token.value =uni.getStorageSync("token")
  if (!token.value) {
    uni.navigateTo({
      url: '../login/login',
    });
    return;
  }
  showFlag.value = true
  userInfo.value = uni.getStorageSync("userInfo").user;
  phone.value = uni.getStorageSync("phone");
  if (userInfo.value) {
    name.value = userInfo.value.userName;
    nickName.value = userInfo.value.nickName;
    orgName.value = userInfo.value.org ?  userInfo.value.org.orgName : '--';
    orgId.value = userInfo.value.org ?  userInfo.value.org.id : '--';
  }
});


// 使用手册
const guid = () => {
  uni.navigateTo({
    url: '/packageBase/pages/userManual/userManual-list',
  });
}

let bindLogout = async () => {
  uni.showLoading({
    title: '退出中',
    mask: true,
  });
  let res = await proxy.http.asyncGet(api.logout, {}, true);
  uni.hideLoading();
  uni.clearStorageSync();
  if(config.AUTHORISATION_ENABLE){
    uni.reLaunch({url: '/pages/login/web-login',});
  }else{
    uni.reLaunch({url: '/pages/login/login',});
  }
};


let toEditPassword = () => {
  uni.navigateTo({
    url: '/packageBase/pages/base/user/editPassword',
  });
};


let advice = () => {
  uni.navigateTo({
    url: '/packageBase/pages/base/user/adivce',
  });
}
// #ifdef MP-WEIXIN
uni.hideTabBar();
// #endif
</script>

<style lang="scss" scoped>
.my_top {
  width: 686rpx;
  margin: 0 auto;
  padding-bottom: 30rpx;
}

.my_photo {
  width: 90px;
  height: 90px;
  border-radius: 50px;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto;
}

.my_phtot_img {
  width: 80px;
  height: 80px;
  margin: 5px auto;
  /* margin: 7px auto; */
  border-radius: 43px;
  /* background: #f47b42; */
}

.my_phtot_img img {
  width: 100%;
  height: 100%;
}

.my_phtot_p {
  width: 100%;
  text-align: center;
  color: #fff;
}

.my_content {
  border-radius: 10px;
  background-color: #F5F5F5;
  overflow-y: auto;

}

.my_list {
  margin: 24rpx;
  /* margin: 7% 5%; */
  padding: 0 32rpx;
  border-radius: 5px;
  background-color: #FFF;
}

.my_list_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 112rpx;
  & > text {
      color: rgba(0, 0, 0, 0.9);
  }
}

.my_list_item image {
  margin-top: 15px;
  width: 20px;
  height: 20px;
}

.my_list_item p {
  color: #333333;
  padding: 0 5%;;
  font-size: 14px;
}

.tcdl {
  width: calc(100% - 48rpx);
  margin: 96rpx auto;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  color: #fff;
}

.uniui-arrowright {
  color: grey !important;
  float: right;
}

.my_list_item_border {
  border-bottom: 1px solid #E7E7E7;
}

button::after {
  border: none !important;
}
.user-info {
  & > .name {
    font-size: 40rpx;
    display: block;
    @include textEllipsis
  }
  & > .note {
    font-size: 28rpx;
    color: var(--uni-text-input-color);
    @include textEllipsis;
    & > .address {
      @include textEllipsis;
    }
  }
  & > view {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    line-height: 1;
    &:first-child {
      margin-top: 52rpx;
    }
  }
}
.icon-phone,.icon-zhuzhi {
  color: var(--uni-text-color-grey);
  padding-right: 15rpx;
}
</style>
